<template>
  <div style="width: 100%; height: 100%; ">
    <div class="flex font_s36 JustifyContentSA" style="color: #7CD4FE; font-weight:bold;width: 100%; height: 10%;">
      <div class="flexC  AlignItemsC">
        <p style="line-height:1.875rem;">大数据分析发现</p>
        <img src="@/assets/img/components/19.png" alt="" style="padding-top: 1rem; width: 80%;" />
      </div>
      <div class="flexC  AlignItemsC">
        <p style="line-height:1.875rem;">互联网移动端发现</p>
        <img src="@/assets/img/components/18.png" alt="" style="padding-top: 1rem; width: 80%;" />
      </div>
    </div>
    <div class="ZnRire">
      <div class="flexC">
        <p class="colorF font_s30 textC" style="position: absolute; left: 56.5%; top: 21.5%;">
          协同
          <br />
          处置
        </p>
        <!-- <p class="colorF font_s30 textC" style="position: absolute; left: 72.5%; top: 75.5%;">
          内部
          <br />
          处置
        </p> -->
        <div class="flex">
          <div class="flex5 flex JustifyContentSA">
            <div class="flexC flex2 AlignItemsFE font_s26 " style="color: #00FEFF; ">
              <div style="padding: 3.5rem;"></div>
              <div class="nav_p">
                <div class="live">
                  <img src="@/assets/img/components/huangdian.png" alt="" />
                  <span></span>
                  <span></span>
                </div>
                <p>评估等级为0-1级的占比 大于30%的街镇</p>
              </div>
              <div class="nav_p">
                <div class="live">
                  <img src="@/assets/img/components/huangdian.png" alt="" />
                  <span></span>
                  <span></span>
                </div>
                <p>日受理人数（初次评估） 大于20人的街镇</p>
              </div>
              <div class="nav_p">
                <div class="live">
                  <img src="@/assets/img/components/huangdian.png" alt="" />
                  <span></span>
                  <span></span>
                </div>
                <p>日申请人数（初次评估） 大于20人的护理机构</p>
              </div>
            </div>
            <div class="flexC flex1 JustifyContentSA AlignItemsC" style="padding-top: 2rem;">
              <div><img src="@/assets/img/components/20.png" style="width: 11.875rem; height: 11.875rem;" alt="" /></div>
              <div><img src="@/assets/img/components/21.png" style="width: 11.875rem; height: 11.875rem;" alt="" /></div>
              <div><img src="@/assets/img/components/22.png" style="width: 11.875rem; height: 11.875rem;" alt="" /></div>
            </div>
            <div class="flexC flex2 font_s26 JustifyContentSB" style="color: #00FEFF;">
              <div style="    padding: 7.8rem;"></div>

              <div class="nav_p1">
                <div class="live ">
                  <img src="@/assets/img/components/lvdian.png" alt="" />
                  <span></span>
                  <span></span>
                </div>
                <p style="line-height: 6rem;">护理机构护理员配比大于12</p>
              </div>
              <div class="nav_p1">
                <div class="live ">
                  <img src="@/assets/img/components/lvdian.png" alt="" />
                  <span></span>
                  <span></span>
                </div>
                <p>运作一年以上的护理机构服务老人数月增（减）大于20%</p>
              </div>
              <div class="nav_p1 " style="margin-top:4rem;">
                <div class="live ">
                  <img src="@/assets/img/components/lvdian.png" alt="" />
                  <span></span>
                  <span></span>
                </div>
                <p>2、3级老人月服务大于14次或4级老人月服务大于23次</p>
              </div>
              <div class="nav_p1 "></div>
            </div>
          </div>

          <div class="flex2 flex JustifyContentSA">
            <div class="flexC JustifyContentSA">
              <p style="padding: 10rem 5rem;"></p>
              <p class=" colorF font_s30 textC">
                内部
                <br />
                处置
              </p>
            </div>
            <div class="flexC JustifyContentSB " style="padding-top: 5rem;">
              <div><img src="@/assets/img/components/23.png" style="width: 11.875rem; height: 11.875rem;" alt="" /></div>
              <div class="nav_p2">
                <div class="live ">
                  <img src="@/assets/img/components/lvdian.png" alt="" />
                  <span></span>
                  <span></span>
                </div>
                <img src="@/assets/img/components/24.png" style="width: 11.875rem; height: 11.875rem;" alt="" />
              </div>
              <div class="nav_p2">
                <div class="live ">
                  <img src="@/assets/img/components/lvdian.png" alt="" />
                  <span></span>
                  <span></span>
                </div>
                <img src="@/assets/img/components/25.png" style="width: 11.875rem; height: 11.875rem;" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script></script>

<style lang="scss" scoped>
.ZnRire {
  width: 102.5rem;
  height: 46.1875rem;
  margin: 0 auto;
  background: url(../../../assets/img/components/17.png) no-repeat center;
  background-size: 100% 100%;

  .nav_p {
    width: 70%;
    height: 20%;

    font-weight: 400;
    p {
      width: 90%;
      height: 20%;
    }
    .live {
      position: relative;
      width: 2.125rem;
      height: 2.125rem;
      left: -20%;
      bottom: -5%;
      span {
        position: absolute;
        width: 2.125rem;
        height: 2.125rem;
        left: 0;
        bottom: 0;
        background: rgba(227, 196, 3, 1);
        border-radius: 50%;
        -webkit-animation: living 3s linear infinite;
      }
      span:nth-child(2) {
        -webkit-animation-delay: 1.5s;
        /*第二个span动画延迟1.5秒*/
      }
    }
  }
  .nav_p1 {
    width: 95%;
    height: 20%;
    font-weight: 400;

    p {
      width: 85%;
      padding-left: 3rem;
    }
    .live {
      position: relative;
      width: 2.125rem;
      height: 2.125rem;
      left: 94%;
      bottom: -4%;

      span {
        position: absolute;
        width: 2.125rem;
        height: 2.125rem;
        left: 0;
        bottom: 0;
        background: rgba(71, 191, 20, 1);
        border-radius: 50%;
        -webkit-animation: living 3s linear infinite;
      }
      span:nth-child(2) {
        -webkit-animation-delay: 1.5s;
        /*第二个span动画延迟1.5秒*/
      }
    }
  }
  .nav_p2 {
    .live {
      position: relative;
      width: 2.125rem;
      height: 2.125rem;
      left: 67%;
      bottom: -15%;
      span {
        position: absolute;
        width: 2.125rem;
        height: 2.125rem;
        left: 0;
        bottom: -2px;
        background: rgba(71, 191, 20, 1);
        border-radius: 50%;
        -webkit-animation: living 3s linear infinite;
      }
      span:nth-child(2) {
        -webkit-animation-delay: 1.5s;
        /*第二个span动画延迟1.5秒*/
      }
    }
  }

  @keyframes living {
    0% {
      transform: scale(1);
      opacity: 0.5;
    }

    50% {
      transform: scale(1.5);
      opacity: 0;
      /*圆形放大的同时，透明度逐渐减小为0*/
    }

    100% {
      transform: scale(1);
      opacity: 0.5;
    }
  }
}
</style>
